<template>

    <h2>修改房号</h2>
    <table border="1">

        <tr>
            <td>房型</td>
            <td>
                <select v-model="info.RoomTypeId">
                    <option :value="0">--请选择--</option>
                    <option v-for="item in roomType" :value="item.RoomTypeId" >{{ item.RoomTypeName }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>房号</td>
            <td>
                <input type="text" v-model="info.RoomNumberName">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" @click="SaveData" value="修改">

            </td>
        </tr>

    </table>
</template>
<script setup lang="ts">
import axios from "axios";
import { onMounted ,ref} from "vue";
import { useRoute,useRouter } from "vue-router";

const route=useRoute();
const router=useRouter();

const info=ref({
    RoomNumberId:0,
    RoomNumberName:"",
    RoomTypeId:0
})

const roomType=ref([{
    RoomTypeId:0,
    RoomTypeName:""

}])

onMounted(()=>{
    GetRoomType();
    GetNumber();

})
//下拉
const GetRoomType=()=>{

    axios.get('https://localhost:7141/api/RoomNumber/GetRoomTypes')
    .then(res=>{
        roomType.value=res.data
    })

}
//反填
const GetNumber=()=>{
axios.get('https://localhost:7141/api/RoomNumber/GetRoomNumber',
{
    params:{
        NumberId:route.params.id
    }
}
)
.then(res=>{
    info.value=res.data
})
}


const SaveData=()=>{

    if(info.value.RoomTypeId==0){
        alert("不能为空");
        return;

    }
    if(info.value.RoomNumberName==""){
        alert("房号名称不能为空");
        return
    }

    axios.put('https://localhost:7141/api/RoomNumber/UpdateNumber',info.value)
    .then(res=>{
        if(res.data>0){
            alert("修改成功");
            router.push("/ShowRoomNumber")
        }
        else{
            alert("修改失败");
        }
    })
}


</script>